<template>
  <div class="question-form-container">
    <button class="button button--primary" @click="onAdd">新增题目</button>
    <form v-for="(item, index) in list" :key="item.key" class="form">
      <div class="form-item">
        <label class="form-item__label">题目ID号</label>
        <input v-model="item.id" class="form-item__input input" type="text" />
      </div>
      <div class="form-item">
        <label class="form-item__label">题目类型</label>
        <input v-model="item.name" class="form-item__input input" type="text" />
      </div>
      <div class="form-item">
        <label class="form-item__label">题目描述</label>
        <textarea v-model="item.desc" class="form-item__textarea input" type="text" />
      </div>
      <div class="form-item">
        <label class="form-item__label">选项</label>
        <div>
          <div class="option-item" v-for="(opt, idx) in item.options" :key="opt.id">
            <div class="block">分值</div>
            <input style="width: 80px;" v-model="opt.score" class="input"   type="text" />
            <input style="width: 120px;" v-model="opt.name" class="input" type="text" />
            <button class="button button--danger" @click.stop.prevent="onDel(index, idx)">删除</button>
          </div>
          <button class="button button--success" @click.stop.prevent="onAddOption(index)">添加选项</button>
        </div>
      </div>
      <div class="form-item">
        <button class="button button--primary" @click.stop.prevent="onSave">保存</button>
        <button class="button">取消</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'QuestionForm',
  data() {
    return {
      list: [{
        key: 1,
        id: '',
        name: '',
        desc: '',
        options: Array(4).fill().map((i, idx) => {
          return { id: idx, name: '', score: '' }
        }),
      }],
      options: []
    }
  },
  mounted() {
    this.initOptions();
  },
  methods: {
    initOptions() {
      return Array(4).fill().map((i, idx) => {
        return { id: idx, name: '', score: '' }
      });
    },
    onAdd() {
      let idx = this.list.length;
      this.list.push({
        key: ++idx,
        id: '',
        name: '',
        desc: '',
        options: this.initOptions(),
      })
    },
    onAddOption(index) {
      let idx = this.list[index].options.length;
      this.list[index].options.push({
        id: ++idx, name: '', score: ''
      })
    },

    onDel(index, idx) {
      this.list[index].options.splice(idx, 1);
    },

    onSave() {
      this.$emit('save', this.list)
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  margin-top: 10px;
  
  &-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    &__label {
      width: 100px;
    }

    &__input {
      width: 420px;
    }

    &__textarea {
      width: 420px;
      height: 60px;
      resize: none;
    }

    .option-item {
      display: flex;
      align-items: center;
      margin-bottom: 6px;

      >.input {
        margin-right: 5px;
      }
    }

    .block {
      width: 60px;
      height: 40px;
      line-height: 40px;
      margin-right: 5px;
      text-align: center;
      background-color: #ccc;
    }

    >.button {
      margin-right: 10px;
    }
  }
}
</style>